<template>
    <div  class="popup " 
  > 
  
        <div 
        :style="{
            width: dailog_width,
            height: dailog_height
        }"      
        class="popup-dialogue bg-white  rounded-sm">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
   props:{
       'dailog_width': {
           type: String,
           default: ""
       },
       'dailog_height': {
           type: String,
           default: ""
       }
   },
   data(){
       return {};
   },
   methods:{

   }
    
}
</script>

<style lang="scss">

.popup{
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    background-color: rgb(0 , 0 , 0 , .3);
    text-align: center;
    // font-size: 0;
    white-space:  nowrap;
    overflow: auto;
    z-index: 999;
}
.popup::after{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    white-space: nowrap;
}
.popup-dialogue{
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    z-index: 1000;
    max-height: 90%;
    overflow: auto;
}
</style>